<template>
  <div class="personal-center-container">
    <div class="personal-center-menu">
      <div class="peronal-message">
        <span
          slot="reference"
          class="user-avatar"
          :style="{ background: color }"
        >{{ avatarName }}</span>
        <div class="name">
          {{ USER.userFullname }}
        </div>
        <div
          v-if="USER.orgList && USER.orgList.length > 0"
          class="department"
        >
          {{ USER.orgList[0].name }}
        </div>
        <div class="cutting-line" />
      </div>

      <div class="menu-list-container">
        <fks-menu
          class="menu-list"
          :default-active="activeMenu"
        >
          <fks-menu-item
            v-for="(item, index) in menuList"
            :key="index"
            class="menu-list-item"
            :index="index.toString()"
            @click="gotoItem(item)"
          >
            <i
              :class="item.icon"
              class="menu-item-left-icon"
            />

            <div class="menu-item-title">
              {{ item.name }}
            </div>

            <i class="fks-icon-arrow-right menu-item-right-icon" />
          </fks-menu-item>
        </fks-menu>
      </div>
    </div>
    <div class="personal-center-detail-list">
      <router-view />
    </div>
  </div>
</template>

<script>
import { avatar, avatarName, avatarColor } from './avatar'
import { USER } from '@/store/State/stateTypes'
import Mix from '@/mixins/module'
export default {
  name: 'PersonalCenter',
  mixins: [Mix],
  computed: {
    USER() {
      return this.$store.state[USER]
    },
    avatar,
    avatarName,
    color() {
      let color = avatarColor.male
      if (this.USER.sex != '男') {
        color = avatarColor.female
      }
      return color[Math.floor(Math.random() * 10)]
    },
    menuList() {
      return [
        {
          icon: 'fks-icon-text',
          name: this.LANG.PERSONAL_INFO,
          path: '/personal/profile'
        },
        {
          icon: 'fks-icon-msg-bubble',
          name: this.LANG.PERSONAL_MESSAGE,
          path: '/personal/message'
        }
      ]
    },
    activeMenu() {
      let tempPath = this.$route.path
      for (let i = 0; i < this.menuList.length; i++) {
        if (tempPath.indexOf(this.menuList[i].path) > -1) return i.toString()
      }
      return (-1).toString()
    }
  },
  mounted() {},
  methods: {
    gotoItem(item) {
      if (item.path) this.$router.push(item.path)
    }
  }
}
</script>

<style lang='scss' scoped>
.personal-center-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.personal-center-menu {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  border-radius: 4px;
  background: #fff;
}

.personal-center-detail-list {
  position: relative;
  flex-grow: 1;
  margin-left: 16px;
  border-radius: 4px;
  background: #fff;
}

.peronal-message {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 32px;

  .user-avatar {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 55px;
    line-height: 120px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background: #b9b9b9;
  }

  .name {
    height: 21px;
    margin-top: 16px;
    font-size: 16px;
    font-family: MicrosoftYaHei, sans-serif;
    line-height: 21px;
    color: #000;
  }

  .department {
    padding: 2px 10px;
    margin-top: 8px;
    border-radius: 2px;
    font-size: 14px;
    font-family: MicrosoftYaHei, sans-serif;
    line-height: 19px;
    text-align: center;
    color: #fff;
    background: #40bb5a;
  }

  .cutting-line {
    width: calc(100% - 64px);
    height: 1px;
    margin: 28px 0;
    background: #eee;
  }
}

.menu-list-container {
  .menu-list {
    border-right: none;
  }

  .menu-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px !important;

    .menu-item-left-icon {
      margin-right: 16px;
      // color: #adadad;
      font-size: 16px;
    }

    .menu-item-title {

      // color: #555555;

      flex-grow: 1;
      font-size: 14px;
    }

    .menu-item-right-icon {
      font-size: 12px;
      // color: #cccccc;
    }
  }
}
</style>